<template>
	<view class="container">
		<Back />
		<view class="top">
			<button open-type="getUserInfo" @getuserinfo="getUserInfo" class="buttonTop"></button>
			<view class="head"><image mode="aspectFill" :src="user.avatarUrl ? user.avatarUrl : '../../static/icon/head_logo.png'"></image></view>
			<view class="name">{{ user.nickname ? user.nickname : '完善信息' }}</view>
		</view>

		<view class="user">
			<view class="mark">会员权益</view>
			<view class="content">账户余额</view>
			<view class="title">
				<text>{{ amount }}</text>
				<text style="font-size: 25rpx;">元</text>
			</view>
			<view class="tips">
				<image src="../../static/icon/juan.png" mode="widthFix"></image>
				<image src="../../static/icon/pintuan.png" mode="widthFix"></image>
				<image src="../../static/icon/card.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 0110号需求 隐藏 -->
		<!-- <view class="list" v-if="!hasMerchant" @tap="toCollect('addMerchant')">
			<view><u-icon name="home"></u-icon></view>
			<text>商户入驻</text>
			<image class="enter img" src="../../static/icon/arrow.png" mode="widthFix"></image>
		</view> -->
		<view class="list" @tap="toCollect('collectList')">
			<image class="icon img" src="../../static/icon/mycollect.png" mode="widthFix"></image>
			<text>我的收藏</text>
			<image class="enter img" src="../../static/icon/arrow.png" mode="widthFix"></image>
		</view>
		<view class="list" @tap="toCollect('history')">
			<image class="icon img" src="../../static/icon/history.png" mode="widthFix"></image>
			<text>历史足迹</text>
			<image class="enter img" src="../../static/icon/arrow.png" mode="widthFix"></image>
		</view>

		<view class="list">
			<button type="default" open-type="contact"></button>
			<image class="icon img" src="../../static/icon/customer.png" mode="widthFix"></image>
			<text>客服中心</text>
			<image class="enter img" src="../../static/icon/arrow.png" mode="widthFix"></image>
		</view>

		<view class="list" @tap="toCollect('about')">
			<image class="icon img" src="../../static/icon/about.png" mode="widthFix"></image>
			<text>关于我们</text>
			<image class="enter img" src="../../static/icon/arrow.png" mode="widthFix"></image>
		</view>
		<view class="phoneContain">
			<view class="kefu">如果您遇到问题，请联系客服电话：</view>
			<view class="phone" @tap="phoneTouch">{{ phone }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '400-864-0052',
			account: {},
			hasMerchant: this.hasMerchant,
			user: this.user
		}
	},
	onShow() {
		this.loadData()
	},
	computed: {
		amount() {
			return this.account.presentAmount !== undefined ? (this.account.cachAmount + this.account.presentAmount).toFixed(2) : '0.00'
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic',
			imageUrl: ''
		}
	},
	methods: {
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadAccount, { deviceUuid: this.deviceUuid }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			uni.hideLoading()
			this.account = data
		},
		getUserInfo: function(e) {
			uni.getUserInfo({
				success: res => {
					console.log(res)
					const json = {
						deviceUuid: this.deviceUuid,
						sessionKey: this.sessionKey,
						encryptedData: res.encryptedData,
						iv: res.iv,
						userInfo: res.userInfo
					}
					this.$post(this.api.fillUserInfo, json).then(() => {
						this.user.nickname = res.userInfo.nickName
						this.user.avatarUrl = res.userInfo.avatarUrl
						uni.showToast({
							title: '登录成功',
							duration: 2000
						})
					})
				}
			})
		},
		phoneTouch: async function() {
			uni.makePhoneCall({
				phoneNumber: this.phone
			})
		},
		toCollect: function(value) {
			this.$Router.push({ name: value })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	display flex
	flex-direction column
	align-items center
	background white
	height auto
	min-height 100vh
	.top
		width 100%
		height 400rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute
		top 0
		filter drop-shadow(0 0 5rpx #C4C4C4)
		.buttonTop
			position absolute
			left 0
			top 0
			width 100%
			height 320rpx
			margin 0
			opacity 0
			z-index 10
		.head
			position absolute
			top 150rpx
			left 50rpx
			width 150rpx
			height 150rpx
			border-radius 50%
			background #FFE7B6
			border 8rpx solid white
			box-sizing border-box
			image
				width 100%
				height 100%
				border-radius 50%
		.name
			position absolute
			font-size 35rpx
			top 200rpx
			left 220rpx
			color #322B29
		.information
			position absolute
			min-width 100rpx
			height 50rpx
			left 205rpx
			top 231rpx
			border-radius 60rpx
			background #fff
			box-shadow 0 0 3rpx #c4c4c4
			display flex
			align-items center
			justify-content center
			font-size 23rpx
			padding 5rpx 30rpx
		.userInfo
			top 225rpx
			width 180rpx
			height 60rpx
	.border
		width 6rpx
		height 70rpx
		margin-top 100rpx
		background #FFE7B5
		float left
		border-radius 5rpx
	.user
		width 650rpx
		height 450rpx
		margin-top 325rpx
		margin-bottom 30rpx
		background white
		display flex
		flex-direction column
		justify-content center
		align-items center
		box-shadow 0 0 5rpx #C4C4C4
		border-radius 30rpx
		z-index 1
		position relative
		.mark
			position absolute
			font-size 30rpx
			top 25rpx
			left 55rpx
		.mark::before
			content ''
			position absolute
			width 15rpx
			height 25rpx
			border-radius 10rpx
			left -25rpx
			top 10rpx
			background #FEC94A
		.title
			font-size 70rpx
			font-weight 800
		.content
			font-size 30rpx
			letter-spacing 4rpx
			color #FEC94A
		.tips
			display flex
			width 450rpx
			position absolute
			bottom 20rpx
			justify-content space-between
			image
				width 70rpx
				height auto
	.list
		background white
		width 700rpx
		height 120rpx
		margin-top 20rpx
		border-radius 35rpx
		box-shadow 0 0 20rpx #E7E7E7
		display flex
		align-items center
		z-index 9
		position relative
		button
			position absolute
			left 0
			top 0
			width 730rpx
			height 120rpx
			margin 0
			opacity 0
			z-index 10
		.icon
			width 70rpx
			margin-left 50rpx
		text
			font-size 35rpx
			margin-left 30rpx
			color #332C2A
		.enter
			width 20rpx
			margin-left auto
			margin-right 50rpx
		view
			width 70rpx
			height 70rpx
			border-radius 50%
			line-height 70rpx
			text-align center
			color white
			font-size 40rpx
			margin-left 50rpx
			background linear-gradient(to right, #FCC447, #FC5D39)
	.phoneContain
		margin-bottom 50rpx
		margin-top 30rpx
		font-family ''
		display flex
		justify-content center
		align-items center
		flex-direction column
		.kefu
			color #c4c4c4
			float left
			font-size 27rpx
		.phone
			color #FED46B
			float left
			font-size 35rpx
</style>
